<template>
	<view>
		<u-form labelPosition="left" :model="form" ref="uForm" label-width="200rpx">
			<!-- 		<view style="display: flex;flex-direction: row;justify-content: space-between;">
				<text>物料名称：</text>
				<picker @change="pickerChange($event, array)" :value="index" :range-key="'itemName'" :range="array">
					<view>{{ itemName }}</view>
				</picker>
				<u-icon name="arrow-down-fill"></u-icon>
			</view> -->
			<u-form-item label="物料名称:" prop="itemCode" borderBottom>
				<u-input v-model="form.itemName" placeholder="请选择" :border="border" @click="show1 = true" @input="itemSearchData"></u-input>
				<view slot="right"><u-icon size="40" name="search" color="#2979ff" @click="itemSearchData1"></u-icon></view>
				<u-picker v-model="itemShow" mode="selector" @confirm="itemConfirm" :range="materialList1" range-key="itemName"></u-picker>
			</u-form-item>
			<u-form-item label="物料编码:" prop="itemCode" borderBottom>
				<u-input v-model="form.itemCode" disabled placeholder="选中物料后自动填充" :border="border"></u-input>
				<u-icon name="scan" @click="handleScan"></u-icon>
			</u-form-item>
			<u-form-item label="规格型号:" prop="specification" borderBottom>
				<u-input v-model="form.specification" disabled placeholder="选中物料后自动填充" :border="border"></u-input>
			</u-form-item>
			<u-form-item label="单位:" prop="unitOfMeasure" borderBottom>
				<u-input v-model="form.unitOfMeasure" disabled placeholder="选中物料后自动填充" :border="border"></u-input>
			</u-form-item>
			<u-gap height="20" bg-color="#dedede"></u-gap>
			<u-form-item label="仓库:" prop="warehouseName" borderBottom>
				<u-input v-model="form.warehouseName" placeholder="请选择" :border="border" type="select" @click="show2 = true"></u-input>
				<u-select v-model="show2" mode="mutil-column-auto" :list="warehouseList" @confirm="confirm2"></u-select>
			</u-form-item>
			<u-form-item label="库区:" prop="locationName" borderBottom>
				<u-input v-model="form.locationName" disabled placeholder="选中仓库后自动填充" :border="border"></u-input>
			</u-form-item>
			<u-form-item label="库位:" prop="areaName" borderBottom>
				<u-input v-model="form.areaName" disabled placeholder="选中仓库后自动填充" :border="border"></u-input>
			</u-form-item>
			<u-gap height="20" bg-color="#dedede"></u-gap>
			<u-form-item label="入库数量:" prop="quantityRecived" borderBottom>
				<u-input v-model="form.quantityRecived" placeholder="请输入数量" :border="border"></u-input>
			</u-form-item>
			<u-form-item label="入库批次号:" prop="batchCode" borderBottom>
				<u-input v-model="form.batchCode" placeholder="请输入批次号" :border="border"></u-input>
				<!-- <u-icon name="scan" @click="handleScan"></u-icon> -->
			</u-form-item>
		</u-form>
		<u-row gutter="32" class="bottom-box" justify="center">
			<u-col span="10">
				<view><u-button type="primary" shape="circle" @click="handleSave()">保存</u-button></view>
			</u-col>
		</u-row>
	</view>
</template>
<script>
export default {
	data() {
		return {
			form: {
				itemCode: '',
				itemName: '',
				specification: '',
				unitOfMeasure: '',
				warehouseName: '',
				warehouseId: '',
				locationName: '',
				locationId: '',
				areaName: '',
				areaId: '',
				batchCode: '',
				quantityRecived: null,
				recptId: null
			},
			rules: {
				itemCode: [
					{
						required: true,
						message: '请选择物料编号',
						trigger: ['change', 'blur']
					}
				],
				warehouseName: [
					{
						required: true,
						message: '请选择仓库',
						trigger: ['change', 'blur']
					}
				]
				// quantityRecived: [
				// 	{
				// 		required: true,
				// 		message: '请输入数量',
				// 		trigger: ['change']
				// 	}
				// ]
			},
			border: false,
			itemShow: false,
			show2: false,
			// 物料参数
			param: {
				itemName: null
			},
			// 物料列表
			materialList: [],
			materialList1: [],
			itemSelect: {}, //x选中物料
			// 仓库列表
			warehouseList: [],
			recptId: null, //入库单ID
			lineId: null //入库单明细ID
		};
	},
	onLoad(options) {
		//判断是否修改
		if (JSON.stringify(options) != '{}') {
			const ID = JSON.parse(options.params);
			this.recptId = ID.recptId;
			this.lineId = ID.lineId;
			const lineId = this.lineId;
			this.$u.api.buyStore
				.getBuyStoreDetailLine({ lineId })
				.then(res => {
					this.form = res.data;
				})
				.catch(err => {
					console.log(err);
				});
		} else {
			this.recptId = parseInt(uni.getStorageSync('recptId'));
			this.form.recptId = this.recptId;
			uni.removeStorageSync('recptId');
		}
		this.getMaterial();
		this.getWarehouseList();
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		pickerChange(e, storage) {
			this.index = e.target.value;
			this.itemName = storage[this.index].itemName;
			this.form.itemName = storage[this.index].itemName;
			this.form.itemCode = storage[this.index].itemCode;
			this.form.specification = storage[this.index].specification;
			this.form.unitOfMeasure = storage[this.index].unitOfMeasure;
		},
		// 获取物料
		getMaterial() {
			this.$u.api.materialInquiry.getMaterialList(this.param).then(res => {
				console.log(res);
				this.materialList = res.rows;
				this.materialList1 = this.materialList;
			});
		},
		itemSearchData() {
			this.materialList1 = [];
			this.param.itemName = this.form.itemName;
			this.getMaterial();
		},
		itemSearchData1() {
			this.itemShow = true;
		},
		itemConfirm(e) {
			const num = parseInt(e.toString());
			this.itemSelect = this.materialList1[num];
			console.log(this.itemSelect);
			this.form.itemId = this.itemSelect.itemId;
			this.form.itemName = this.itemSelect.itemName;
			this.form.itemCode = this.itemSelect.itemCode;
			this.form.specification = this.itemSelect.specification;
			this.form.unitOfMeasure = this.itemSelect.unitOfMeasure;
		},
		// 获取仓库
		getWarehouseList() {
			this.$u.api.Warehouse.getWarehouseTree().then(res => {
				console.log(res);
				this.warehouseList = res.data;
				// 数据转换
				let arr = [];
				this.warehouseList.forEach((item, index) => {
					arr[index] = {
						value: item.warehouseId,
						label: item.warehouseName,
						children: item.children
					};
					//第二级
					item.children.forEach((v, i) => {
						arr[index].children[i] = {
							value: v.locationId,
							label: v.locationName,
							children: v.children
						};
						//第三级
						v.children.forEach((m, n) => {
							arr[index].children[i].children[n] = {
								value: m.areaId,
								label: m.areaName
							};
						});
					});
				});
				this.warehouseList = arr;
			});
		},
		// 保存
		handleSave() {
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log('验证通过');
					if (this.lineId == null) {
						console.log('进入新增');
						this.$u.api.otherIn
							.handleOtherInAddLine(this.form)
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '新增成功',
										duration: 1000
									});
									uni.navigateTo({
										url: '/pages/sys/home/components/work_bench/other-in/other_in?params=' + this.recptId
									});
								}
							})
							.catch(err => {
								console.log(err);
							});
					} else {
						console.log('进入修改');
						this.$u.api.otherIn
							.handleOtherInUpdataLine(this.form)
							.then(res => {
								if (res.code == 200) {
									uni.showToast({
										title: '修改成功',
										duration: 1000
									});
									uni.navigateTo({
										url: '/pages/sys/home/components/work_bench/other-in/other_in?params=' + this.recptId
									});
								}
							})
							.catch(err => {
								console.log(err);
							});
					}
				} else {
					console.log('验证失败');
				}
			});
		},
		// 掃碼
		handleScan() {
			console.log('扫码');
			const pluginImpl = uni.requireNativePlugin('KTGPlugins-QRCode');
			if (pluginImpl) {
				pluginImpl.goToScanPage(
					{
						isQrcode: true
					},
					data => {
						console.log(data);
						const codeData = data.data;
						if (codeData) {
							// this.$u.api.BatchCode.getBatchCodeInfo({ batchValue: codeData }).then(res => {
							this.$u.api.snCode.getSnCodeInfo({ snCode: codeData }).then(res => {
								this.form = res.rows[0];
								this.form.itemName = res.rows[0].itemName;
								this.form.itemCode = res.rows[0].itemCode;
								this.form.specification = res.rows[0].specification;
								this.form.unitOfMeasure = res.rows[0].unitOfMeasure;
								// this.itemName = res.data.itemName;
								// this.form.itemName = res.data.itemName;
								// this.form.itemCode = res.data.itemCode;
								// this.form.specification = res.data.specification;
								// this.form.unitOfMeasure = res.data.unitOfMeasure;
								// this.form.quantityRecived = res.data.batchnum;
								// this.form.batchCode = res.data.batchCode;
							});
						} else {
							uni.showToast({
								title: '二维码错误',
								icon: 'none'
							});
						}
					}
				);
			} else {
				uni.showToast({
					title: '失败',
					icon: 'none'
				});
			}
		},
		confirm2(e) {
			console.log(e);
			this.form.warehouseName = e[0].label;
			this.form.locationName = e[1].label;
			this.form.areaName = e[2].label;
			this.form.warehouseId = e[0].value;
			this.form.locationId = e[1].value;
			this.form.areaId = e[2].value;
		}
	}
};
</script>

<style lang="scss" scoped>
.u-form {
	padding: 0 40rpx;
}
.buttons {
	margin-top: 50rpx;
	display: flex;
	justify-content: space-between;
}
</style>
